<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <title>Cards</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="../../dist/css/ionic.css" rel="stylesheet">
    <script src="../../dist/js/ionic.bundle.js"></script>
    <script>
      angular.module('ionicApp', ['ionic'])
    </script>
  </head>
  <body>

    <header class="bar bar-header bar-dark">
      <h1 class="title">Cards</h1>
    </header>

    <ion-content class="has-header">

      <div class="card">
        <div class="item item-text-wrap">
          This is a basic Card with some wrapping text.
          This is a basic Card with some wrapping text.
          This is a basic Card with some wrapping text.
        </div>
      </div>

      <div class="card item-text-wrap">
        <div class="item">
          This is a basic Card with some wrapping text.
          This is a basic Card with some wrapping text.
          This is a basic Card with some wrapping text.
        </div>
      </div>

      <div class="card">
        <div class="item item-complex item-text-wrap">
          <div class="item-content">
            This is a basic Card with some wrapping text.
            This is a basic Card with some wrapping text.
            This is a basic Card with some wrapping text.
          </div>
        </div>
      </div>

      <div class="card item-text-wrap">
        <div class="item item-complex">
          <div class="item-content">
            This is a basic Card with some wrapping text.
            This is a basic Card with some wrapping text.
            This is a basic Card with some wrapping text.
          </div>
        </div>
      </div>

      <div class="card">
        <div class="item item-divider">
          I'm a Header in a Card!
        </div>
        <div class="item item-text-wrap">
          This is a basic Card with some text.
        </div>
        <div class="item item-divider">
          I'm a Footer in a Card!
        </div>
      </div>

      <div class="list card">

        <a href="#" class="item item-icon-left">
          <i class="icon ion-home"></i>
          Enter home address
        </a>

        <a href="#" class="item item-icon-left">
          <i class="icon ion-ios7-telephone"></i>
          Enter phone number
        </a>

        <a href="#" class="item item-icon-left">
          <i class="icon ion-wifi"></i>
          Enter wireless password
        </a>

        <a href="#" class="item item-icon-left">
          <i class="icon ion-card"></i>
          Enter card information
        </a>

      </div>

      <div class="list card">

        <div class="item item-avatar">
          <img src="http://tutupash.com/site/assets/nin_logo.jpeg">
          <h2>Pretty Hate Machine</h2>
          <p>Nine Inch Nails</p>
        </div>

        <div class="item item-avatar item-complex">
          <a class="item-content">
            <img class="item-img" src="http://tutupash.com/site/assets/nin_logo.jpeg">
            <h2>Pretty Hate Machine, .item-complex</h2>
            <p>Nine Inch Nails</p>
          </a>
        </div>

        <div class="item item-image">
          <img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
        </div>

        <a href="#" class="item item-icon-left">
          <i class="icon ion-music-note"></i>
          Start listening
        </a>

      </div>

      <div class="list card">

        <div class="item item-avatar">
          <img src="http://mimg.ugo.com/201001/34590/cuts/marty-mcfly_288x288.jpg">
          <h2>Marty McFly</h2>
          <p>November 05, 1955</p>
        </div>

        <div class="item item-thumbnail-left">
          <img src="http://mimg.ugo.com/201001/34590/cuts/marty-mcfly_288x288.jpg">
          <h2>Marty McFly</h2>
          <p>November 05, 1955</p>
        </div>

        <div class="item item-thumbnail-left item-complex">
          <a class="item-content">
            <img src="http://mimg.ugo.com/201001/34590/cuts/marty-mcfly_288x288.jpg">
            <h2>Marty McFly, .item-complex</h2>
            <p>November 05, 1955</p>
          </a>
        </div>

        <div class="item item-thumbnail-right">
          <img src="http://mimg.ugo.com/201001/34590/cuts/marty-mcfly_288x288.jpg">
          <h2>Marty McFly</h2>
          <p>November 05, 1955</p>
        </div>

        <div class="item item-thumbnail-right item-complex">
          <a class="item-content">
            <img src="http://mimg.ugo.com/201001/34590/cuts/marty-mcfly_288x288.jpg">
            <h2>Marty McFly, .item-complex</h2>
            <p>November 05, 1955</p>
          </a>
        </div>

        <div class="item item-body">
          <img class="full-image" src="http://paulaubin.com/wp/wp-content/uploads/2012/05/back-to-the-future-delorean.jpg">
          <p>
            This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
            the content is from a card-body consisting of an image and paragraph text. The footer
            consists of a Tab Bar, icons aligned left, within the card-footer.
          </p>
          <p>
            <a href="#" class="subdued">1 Like</a>
            <a href="#" class="subdued">5 Comments</a>
          </p>
        </div>

        <div class="item tabs tabs-secondary tabs-icon-left">
          <a class="tab-item" href="#">
            <i class="icon ion-thumbsup"></i>
            Like
          </a>
          <a class="tab-item" href="#">
            <i class="icon ion-chatbox"></i>
            Comment
          </a>
          <a class="tab-item" href="#">
            <i class="icon ion-share"></i>
            Share
          </a>
        </div>

      </div>

      <p><a class="button button-secondary" href="../">All CSS Tests</a></p>

    </ion-content>

  </body>
</html>
